//
//  DailySentenceView.swift
//  FreeWallpaperSwiftUI
//
//  Created by 张少康 on 2023/12/4.
//

import SwiftUI
import Kingfisher

struct DailySentenceView: View {
    @Binding var showDailyView: Bool
    @ObservedObject var viewModel = DailySentenceViewModel()
    var body: some View {
        ScrollView {
            VStack (spacing: 25) {
                
                Text(viewModel.positiveWord)
                    .foregroundStyle(.black)
                    .font(Font.custom("BlackOpsOne-Regular", size: 40))
                
                ZStack (alignment: .top){
                    RoundedRectangle(cornerRadius: 8)
                        .fill(Color.pink.opacity(0.1))
                        .aspectRatio(1, contentMode: .fill)
                    
                    KFImage(URL(string: viewModel.imageUrl))
                        .resizable()
                        .aspectRatio(1, contentMode: .fill)
                        .clipped()
                }
                
                HStack {
                    Text(viewModel.text)
                        .kerning(1.5)
                        .lineSpacing(5)
                        .foregroundStyle(.black.opacity(0.8))
                        .font(.system(size: 18))
                    Spacer()
                }.padding(.horizontal)
                Spacer()
                
            }
            
            Button(action: {
                viewModel.changeText()
            }, label: {
                Text("换一句")
                    .foregroundColor(.pink)
                    .font(Font.custom("ZhiMangXing-Regular", size: 20))
                    .frame(maxWidth: .infinity)
                    .padding(.vertical,12)
            }).background(.pink.opacity(0.1))
                .mask(RoundedRectangle(cornerRadius: 10))
                .padding()
            
            Button(action: {
                showDailyView.toggle()
            }, label: {
                Image(systemName: "xmark")
                    .font(.body.weight(.bold))
                    .foregroundColor(.secondary)
                    .padding(8)
                    .background(.ultraThickMaterial, in: Circle())
            }).padding()
        }
        .background(Color.white)
    }
}

#Preview {
    DailySentenceView(showDailyView: .constant(true))
}
